<template>
  <div class="login themebgcolor">
   <header-bar :text="title" :left="left"></header-bar>
        <div class="imgbg"></div>
        <div class="login_content">
            <form>
                <input type="text" placeholder="请输入手机号" v-model="mobilephone" style="margin-bottom:25px;">
                <input type="password" placeholder="请输入密码" v-model="pwd">
                <div class="reg_yzm">
                    <input type="text" placeholder="请输入验证码" v-model="code">
                    <span class="getyzm" v-if="getflag" @click="getyzm(mobilephone)">验证码</span>
                    <span class="stopyzm" v-if="getflag==false">{{time}}s</span>
                </div>
            </form>
        </div>
        <div class="login_btn ">
            <button  @click="retrieve(mobilephone&&pwd)" class="themebtn1">完成</button>
        </div>
  </div>
</template>
<script>
import headerBar from "./main/header";
import { Header, Toast } from "mint-ui";
import { requestLogin } from "../api/api.js";
import util from "../assets/js/util.js";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      msg: "",
      mobilephone: "",
      pwd: "",
      code:"",
      time: 60,
      before: "",
      title: "忘记密码",
      left: {
        status: true
      },
      getflag: true,
    };
  },
  computed: {
    ...mapState(["pageInfo"])
  },
  components: {
    headerBar
  },
  methods: {
      getyzm(){
            if (this.mobilephone) {
                let para = {
                mobilephone: this.mobilephone
            };
            this.$ajaxPost("sendCode", para).then(res => {
                // console.log(res);
                Toast({
                    message: res.msg,
                    position: "bottom",
                    duration: 5000
                });
                if (res.code == 200) {
                    this.getflag = false;
                    var that = this;
                    var timer = setInterval(function() {
                        that.time--;
                        if (that.time <= 0) {
                        clearInterval(timer);
                        that.getflag = true;
                        that.time = 60;
                        }
                    }, 1000);
                }
            });
        } else {
            Toast({
            message: "请先填写手机号！",
            position: "bottom",
            duration: 3000
            });
        }
    },
    retrieve(res) {
      if (res) {
        let para = {
          mobilephone: this.mobilephone,
          code: this.code,
          pwd: this.pwd
        };
        this.$ajaxPost("retrieve", para).then(res => {
          Toast({
            message: res.msg,
            position: "bottom",
            duration: 5000
          });
          if (res.code == 200) {
            util.clearLocalStorage();
            Toast({
                message: "找回密码成功",
                position: "bottom",
                duration: 3000
            });
            this.$router.back();
          }
        });
      } else {
        Toast({
          message: "请先输入验证码和登录密码！",
          position: "bottom",
          duration: 3000
        });
      }
    },
  },
  mounted() {
    
    this.before = this.$route.query.redirect ? this.$route.query.redirect : "/";
  }
};
</script>
<style lang="less" scoped>
@import url("../../static/css/theme.less");
</style>

<style scoped>
@import url("../../static/css/login.css");
.reg_yzm {
    width: 100%;
    padding: 10px 0; 
    display: flex;
    align-items: center;
    margin-top: 15px;
    border-bottom: 1px solid #ececec;
}

.reg_yzm input {
    flex: 1;
    border-bottom: none;}

.reg_yzm span {
    border-radius: 6px;
    height: 25px;
    font-size: 12px;
    display: inline-block;
    line-height: 25px;
    text-align: center;
}

.reg_yzm .getyzm {
    width: 80px;
    color: #f7a95c;
    border: #f7a95c 1px solid;
}
.reg_yzm .stopyzm {
    width: 50px;
    border: 1px solid #999;
    color: #999;
}

</style>
